/**
 * marker图层 自定义divIcon
 */
// import sgisRegionBase from "../../sfgis.region.base";
// import hlLayer from "../../lib/systemlayers/hl.layer.js";
// import sgisMapBase from "../../sfgis.map.base";
import mapPopup from './../common/map.popup';

export default {
  regionLableLayer: null,
  markerData:[],
  popup:null,
  activeMap:null,
  openPopupFunc:null,
 /**
   * 创建专题图
   * @param {Object} map 地图实例
   * @param {Object} data 用于创建专题图的数据
   *      {
   *        "id": "", 专题图的id
   *        "name": "", 专题图的名称
   *        "datas": [
   *          {id:"",name:"",lon:"",lat:"",regioncode:"",regionname:""},{}
   *        ]
   *      }
   */
  createLayer(map,dataobj,showMorePanel) {
    let _this = this;
    _this.activeMap = map;
    if(showMorePanel){
      _this.openPopupFunc = showMorePanel;
    }
    
    //先清除一下原有的标签
    _this.clearAll();
    
    let datas = dataobj.datas;
    _this.markerData= datas;
    for (let i = 0; i < datas.length; i++) {
      // 区划信息
      let dataTemp = datas[i];
      var el = document.createElement('div');
      el.className = 'marker-lable-' + map._container.id;
      el.style="width:35px;height:auto;";
      el.innerHTML=this.getIconHtml(dataTemp,map);
      if(dataTemp.lon&&dataTemp.lat){
        new mapboxgl.Marker(el)
        .setLngLat([dataTemp.lon,dataTemp.lat])
        .addTo(map);
      }
    }

    // 事件绑定
    $("div.marker-lable-map").unbind("click");
    // 添加lable事件
    $("div.marker-lable-map").bind("click", function() {
      let eleId =  ($(this).find("div")).attr("id");
      // _this.renderPopup(eleId);

      _this.createHoverMarker(eleId);

      let popupData = {};
      for(let i = 0 ; i < _this.markerData.length; i++){
        if( _this.markerData[i].id==eleId){
          popupData = _this.markerData[i];
        }
      }
      mapPopup.openPopup(popupData,_this.openPopupFunc);
    })

  },

  clearAll(){
    this.cleanLables();
    this.clearPopup();
    this.clearHoverMarker();
  },
  //清除信息框
  clearPopup(){
    mapPopup.clearPopup();
    // if(this.popup){
    //   this.popup.remove();
    // }
  },

  //渲染信息框
  renderPopup(eleId){
    let that = this;
    that.clearPopup();
    let popupData = {};
    for(let i = 0 ; i < that.markerData.length; i++){
      if( that.markerData[i].id==eleId){
        popupData = that.markerData[i];
      }
    }
    let html = "";
    let dataobj = popupData.data;
    for(let j in dataobj){
      if(j!="info"){
        html +='<br/>'+dataobj[j].name+":"+dataobj[j].value;
      }
    }
    let lngLat = [popupData.lon,popupData.lat];
    let div = document.createElement('div');
    div.className="marker-popup-"+ that.activeMap._container.id;
    div.innerHTML="<div>"+
    html
    +"</div>";

    let popupOffsets ={
      'left': [12, -5],
    }
    that.popup = new mapboxgl.Popup({
      className: 'marker-popup-searchInfo',
      anchor: 'left',
      closeButton: true,
      closeOnClick: false,
      offset: popupOffsets
    });
 
    that.popup.setLngLat(lngLat)
        .setDOMContent(div) // sets a popup on this marker
        .addTo(that.activeMap);

    EventBus.$emit('highLightResLi', eleId)
  },
  //高亮marker并重置地图定位
  highLightMarker(eleId){
    let that = this;
    // that.renderPopup(eleId);

    let popupData = {};
    for(let i = 0 ; i < that.markerData.length; i++){
      if( that.markerData[i].id==eleId){
        popupData = that.markerData[i];
      }
    }
    let lngLat = [popupData.lon,popupData.lat];
    // that.activeMap.setCenter(lngLat)
    that.activeMap.flyTo({
      center: lngLat,
      speed: 0.9
    })
    mapPopup.openPopup(popupData,that.openPopupFunc);
  },

  initData(oldData){
    let featuresObj={
      type: "FeatureCollection",
      features:[]
    };
    let obj = {};
    for(let i = 0 ; i < oldData.length; i++){
      obj={
        id:oldData[i].id,
        type: "Feature",
        geometry:{
          type: "Point",
          coordinates:[oldData[i].lon,oldData[i].lat]
        },
        properties:oldData[i].data
      }
      featuresObj.features.push(obj);
    }
    return featuresObj;
  },
  showLayer(map) {
    //此处根据样式显示
    let className = ".marker-lable-" + map._container.id;
    $(className).show();
  },
  hideLayer(map) {
    let className = ".marker-lable-" + map._container.id;
    $(className).hide();
    // this.regionLableLayer.remove();
    //此处根据央视隐藏
  },
  cleanLables() {
    if(this.activeMap){
      let className = ".marker-lable-" + this.activeMap._container.id;
      $(className).remove();
    }
  },
  /**
   * 自定义标签html
   * @param {Object} dataTemp 区划信息
   * { "id": "", "regioncode": "", "regionname": "", "regionlevel":"","regiontype":"","rname":"","pname":"","lon": "", "lat": "" }
   */
  getIconHtml(dataTemp) {
    // marker lable样式
    let ele =  "<div lat='"+dataTemp.lat+
    "'lon='"+dataTemp.lon+
    "'id='"+dataTemp.id+
    "'><img style='width:35px;height:auto;z-index:200;' src='static/images/marker_blue.png'/></div>";
    return ele;
  },
  //创建hover状态Marker
  createHoverMarker(eleId){
    let that = this;
    that.clearHoverMarker();
    let dataTemp = {};
    for(let i = 0 ; i < that.markerData.length; i++){
      if( that.markerData[i].id==eleId){
        dataTemp = that.markerData[i];
      }
    }

    var el = document.createElement('div');
    el.className = 'marker-hover-lable-' + that.activeMap._container.id;
    el.style="width:35px;height:auto;z-index:200;";
    el.innerHTML =  "<div lat='"+dataTemp.lat+
    "'lon='"+dataTemp.lon+
    "'id='"+dataTemp.id+
    "'><img style='width:35px;height:auto;z-index:200;' src='static/images/marker_red.png'/></div>";

    new mapboxgl.Marker(el)
      .setLngLat([dataTemp.lon,dataTemp.lat])
      .addTo(that.activeMap);
  },
  //通过数据创建高亮Marker
  createHoverMarkerByData(data){
    let that = this;
    that.clearHoverMarker();
    let dataTemp = data;
    var el = document.createElement('div');
    el.className = 'marker-hover-lable-' + that.activeMap._container.id;
    el.style="width:35px;height:auto;z-index:200;";
    el.innerHTML =  "<div lat='"+dataTemp.lat+
    "'lon='"+dataTemp.lon+
    "'id='"+dataTemp.id+
    "'><img style='width:35px;height:auto;z-index:200;' src='static/images/marker_red.png'/></div>";
    new mapboxgl.Marker(el)
      .setLngLat([dataTemp.lon,dataTemp.lat])
      .addTo(that.activeMap);

      mapPopup.openPopup(dataTemp,that.openPopupFunc);
  },
  //清除hover状态Marker
  clearHoverMarker(){
    if(this.activeMap){
      let className = ".marker-hover-lable-" + this.activeMap._container.id;
      $(className).remove();
    }
  }

};
